<template>
    <div class="login_main" ref="vantaRef" style="width:100%;height:100vh">
        <div class="login_box">
            <div class="login_box_main">
                <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="80px" class="login-box">
                    <h2 class="login-title"></h2>
                    <h3 class="login-title">欢迎登录</h3>
                    <div style="margin-left: -25px">
                        <el-form-item label="邮箱" prop="username">
                            <el-input type="text" placeholder="请输入邮箱" v-model="loginForm.username"/>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" placeholder="请输入密码" @keyup.enter="keyDown"
                                      v-model="loginForm.password"/>
                        </el-form-item>
                    </div>
                </el-form>
                <el-button style="text-align: center" @click="login">登录</el-button>
                <el-button style="text-align: center" @click="resgin">注册</el-button>
            </div>
        </div>
    </div>
</template>

<script>

import {getLogin, getrole} from "@/views/login/login";
import * as THREE from 'three'
import BIRDS from 'vanta/src/vanta.birds'
export default {
    name: 'login',
    data() {
        return {
            loginForm: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    {required: true, message: '邮箱不可为空', trigger: 'blur',},
                    {min: 5, max: 30, message: '长度在 5到 30 个字符', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '密码不可为空', trigger: 'blur',},
                    {min: 1, max: 30, message: '长度在 5 到 30个字符', trigger: 'blur'}
                ],
            },
            // 登陆框的loading
            loginLoading: false
        }
    },
    mounted() {
        // this.vantaEffect = BIRDS({
        //     el: this.$refs.vantaRef,
        //     THREE: THREE
        // });
    },
    beforeDestroy() {
        if (this.vantaEffect) {
            this.vantaEffect.destroy()
        }
    },
    methods: {
        login() {
            getLogin(this.loginForm).then(res => {
                if (res.code === 200) {
                    this.$message.success("登录成功！！")
                    getrole().then(res => {
                        if (res.code === 200) {
                            this.$store.state.role = '超级管理员'
                            // console.log(this.$store.state.role)
                        } else {
                            this.$store.state.role = '普通用户'
                            // console.log(this.$store.state.role)
                        }
                    })
                    this.$store.commit("SET_INFO", res.data)
                    window.sessionStorage.setItem('token', res.token)
                    //进行头像路径判断赋值，以用来区别是否展示默认头像头像
                    if (this.$store.state.user.avatar !== null) {
                        this.$store.state.imgurl = 1
                    }
                    this.$router.push({
                        path: 'shop'
                    })
                } else {
                    this.$message.error("登录失败，账号或密码错误！")
                }
            })
        },
        resgin() {
            if (window.sessionStorage.getItem("token") !== null) {
                window.sessionStorage.removeItem("token")
            }
            this.$router.push({
                path: 'register'
            })
        },
        keyDown(e) {
            if (e.keyCode === 13) {
                this.login()
            }
        }
        /*  this.loginLoading = true
          setTimeout(() => {
            this.loginLoading = false
            console.log(this.loginForm)
          }, 1000)
        },*/
    },
    /*  mounted () {
        //添加回车登陆
        window.onkeydown = (e) => {
          if (e.keyCode == 13 && !this.loginLoading) {
            this.login()
          }
        }
      },
      beforeDestroy () {
        //取消监听事件
        window.onkeydown = () => {
        }
      }*/
}
</script>

<style lang="less" scoped>
.login_main {
  background-color: rgba(51, 85, 121, 0);
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;

  .login_box {
    display: flex;
    border: 10px solid rgba(51, 85, 121, 0);
    width: 350px;
    margin: 250px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
    text-align: center;

    /*   &::after,
       &::before {
         position: absolute;
         content: "";
         left: 50%;
         width: 15%;
         height: 300%;
         top: -100%;
         transform: translate(-50%, -50%);
         background-image: conic-gradient(transparent, transparent, transparent, #440ab8);
         animation: rotate 5s linear infinite;
       }

       &::after {
         background-image: conic-gradient(transparent, transparent, transparent, #d04310);
         animation-delay: -2.5s;
       }*/
    /*
        @keyframes rotate {
          from {
            transform: rotate(0);
          }
          to {
            transform: rotate(360deg);
          }
        }*/

    /*    .login_box_main {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 1;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-between;
          width: 99%;
          height: 98%;
          border-radius: 20px;
          background-color: rgba(51, 85, 121, 0.96);
          padding: 30px;
        }*/

    .form {

    }

    .login-title {
      text-align: center;
      margin: 0 auto 40px auto;
      color: #303133;
    }

  }
}
</style>
